<template>
	<div class="box">
		<p>{{ props.attrs.title }}</p>
		<div class="line"></div>
	</div>
</template>

<script setup lang="ts">
import { reactive, getCurrentInstance, onMounted, ref } from "vue";
import type { EChartsOption, EChartsType } from "echarts";
import type { IChartsProps } from "@/typings/charts";

interface IProps {
	title: string;
	xText: string[];
	data: number[];
}

const props = defineProps<IChartsProps<IProps>>();
const that = getCurrentInstance();
const lineDom = ref<HTMLElement>();
const myLineChart = ref<EChartsType>();
const lineOption = reactive<EChartsOption>({
	tooltip: {
		trigger: "axis",
	},
	xAxis: {
		type: "category",
		data: props.attrs.xText,
		axisLabel: {
			inside: true,
		},
		axisTick: {
			show: false,
		},
	},
	yAxis: {
		type: "value",
		axisLine: {
			show: true,
		},
		axisLabel: {
			inside: false,
		},
		axisTick: {
			show: true,
		},
	},
	series: [
		{
			data: props.attrs.data,
			type: "line",
			smooth: true,
			itemStyle: {
				color: "#ffa897",
			},
			lineStyle: {
				color: "#ffa897",
				shadowColor: "gray",
				shadowBlur: 5,
				shadowOffsetY: 10,
			},
		},
	],
});

onMounted(() => {
	lineDom.value = (that?.vnode.el as HTMLElement).getElementsByClassName(
		"line"
	)[0] as HTMLElement;
	myLineChart.value = that?.proxy?.$echarts.init(lineDom.value);
	myLineChart.value?.setOption(lineOption);
});
</script>

<style scoped lang="scss">
@import url(./index.scss);
</style>
